<template>
  <div class="user">
    <!-- 卡片-管理员 -->
    <el-card class="box-card">
      <h1>管理员</h1>
      <el-table :data="admin" style="width: 100%">
        <el-table-column width="80" label="头像">
          <template slot-scope="sAvatar">
            <el-avatar :src="sAvatar.row.avatar"></el-avatar>
            <!-- <el-avatar> {{ sAvatar.row.nickname[0] }} </el-avatar> -->
          </template>
        </el-table-column>
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="nickname" label="昵称"> </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="180">
        </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <!-- <el-table-column prop="password" label="密码"> </el-table-column> -->
        <el-table-column prop="signature" label="签名" min-width="180">
        </el-table-column>
        <el-table-column prop="wechat" label="微信"> </el-table-column>
        <el-table-column label="操作" align="right" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              @click="handleEditAdmin(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 卡片-普通用户 -->
    <el-card class="box-card">
      <h1>用户</h1>
      <el-table :data="users" style="width: 100%" stripe>
        <!-- <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column width="80" label="头像">
          <template slot-scope="sAvatar">
            <el-avatar
              :src="sAvatar.row.avatar"
              :key="sAvatar.row.id"
            ></el-avatar>
            <!-- <el-avatar>
              {{ sAvatar.row.nickname ? sAvatar.row.nickname[0] : '' }}
            </el-avatar> -->
          </template>
        </el-table-column>
        <el-table-column prop="id" label="id"> </el-table-column>
        <el-table-column prop="nickname" label="昵称"> </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="180">
        </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <!-- <el-table-column prop="password" label="密码"> </el-table-column> -->
        <!-- 操作列 -->
        <el-table-column align="right" fixed="right">
          <!-- 添加 -->
          <template slot="header">
            <el-button
              type="warning"
              icon="el-icon-plus"
              size="small"
              @click="handelAdd"
              >添加用户</el-button
            >
          </template>
          <!-- 操作: 编辑, 删除 -->
          <template slot-scope="sOperate">
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              @click="handleEdit(sOperate.$index, sOperate.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(sOperate.$index, sOperate.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[3, 5, 10, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 批量删除 -->
      <div class="batch-del">
        <!-- <el-button type="danger">批量删除</el-button> -->
        <!-- <el-input v-model="search" placeholder="输入内容搜索"></el-input> -->
      </div>
    </el-card>
    <!-- 添加 修改对话框 -->
    <el-dialog
      :title="isEdit ? '修改' : '添加' + '用户'"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <!-- 头像上传与回显 -->
      <el-upload
        style="display: flex; justify-content: center"
        name="avatar"
        action="http://localhost:3000/upload/avatar/"
        v-show="isEdit"
        :show-file-list="true"
        :limit="1"
        :on-exceed="handleImageExeed"
        :before-upload="beforeImageUpload"
        :on-success="handleSuccessUpload"
      >
        <img
          v-if="imageUrl"
          :src="imageUrl"
          style="width: 60px; height: 60px; border-radius: 50px"
        />
        <i v-else class="uploader-tip">点击修改头像</i>
      </el-upload>
      <el-input placeholder="请输入内容" v-model="user.username">
        <template slot="prepend">用户名</template>
      </el-input>
      <el-input placeholder="请输入内容" show-password v-model="user.password">
        <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
      </el-input>
      <el-input placeholder="请输入内容" v-model="user.nickname">
        <template slot="prepend">昵&nbsp;&nbsp;&nbsp;称</template>
      </el-input>
      <el-input placeholder="请输入内容" v-model="user.email">
        <template slot="prepend">邮&nbsp;&nbsp;&nbsp;箱</template>
      </el-input>
      <el-input
        placeholder="请输入内容"
        v-show="isAdmin"
        v-model="user.signature"
      >
        <template slot="prepend">签&nbsp;&nbsp;&nbsp;名</template>
      </el-input>
      <el-input placeholder="请输入内容" v-show="isAdmin" v-model="user.wechat">
        <template slot="prepend">微&nbsp;&nbsp;&nbsp;信</template>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cacel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  created() {
    this.getData();
  },
  data() {
    return {
      total: 0,
      admin: [],
      users: [],
      search: "22",
      page: 1,
      size: 5,
      isEdit: false,
      centerDialogVisible: false,
      id: "",
      isAdmin: false,
      user: {
        username: "",
        password: "",
        avatar: "",
        nickname: "",
        email: "",
        signature: "",
        wechat: "",
      },
      imageUrl: true,
    };
  },
  methods: {
    getData() {
      // 获取管理员信息
      this.$http.get("/users/?role_name=admin").then((res) => {
        const { code, result } = res;
        if (code == 0) {
          this.admin = result;
        }
      });
      // 获取普通用户信息
      this.$http
        .get(`/users/?page=${this.page}&size=${this.size}`)
        .then((res) => {
          const { code, result } = res;
          if (code == 0) {
            this.total = result.total;
            this.users = result.users;
          }
        });
    },
    // 添加普通用户
    handelAdd() {
      this.isAdmin = false;
      this.isEdit = false;
      this.user = {};
      this.centerDialogVisible = true;
    },
    // 修改理员信息
    handleEditAdmin(index, row) {
      this.isAdmin = true;
      this.isEdit = true;
      this.imageUrl = row.avatar;
      this.id = row.id;
      this.user.avatar = row.avatar;
      this.user.nickname = row.nickname;
      this.user.email = row.email;
      this.user.username = row.username;
      this.user.password = row.password;
      this.user.signature = row.signature;
      this.user.wechat = row.wechat;
      this.centerDialogVisible = true;
    },
    // 修改普通用户信息
    handleEdit(index, row) {
      this.isAdmin = false;
      this.isEdit = true;
      this.imageUrl = row.avatar;
      this.id = row.id;
      this.user.avatar = row.avatar;
      this.user.nickname = row.nickname;
      this.user.email = row.email;
      this.user.username = row.username;
      this.user.password = row.password;
      this.user.signature = row.signature;
      this.user.wechat = row.wechat;
      this.centerDialogVisible = true;
    },
    // 删除用户
    handleDelete(index, row) {
      this.$confirm("确定删除此用户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete(`/users?id=${row.id}`).then((res) => {
            const { code } = res;
            if (code == 0) {
              this.getData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleSizeChange(val) {
      this.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    // 对话框 确认
    save() {
      // 修改用户信息
      if (this.isEdit) {
        this.$http.put(`/users/?id=${this.id}`, this.user).then((res) => {
          this.id = "";
          this.user.avatar = "";
          this.user.nickname = "";
          this.user.email = "";
          this.user.username = "";
          this.user.password = "";
          this.user.signature = "";
          this.user.wechat = "";
          if (res.code == 0) {
            this.getData();
            this.$message({
              type: "success",
              message: "修改成功!",
            });
          } else {
            this.$message({
              type: "info",
              message: "修改失败",
            });
          }
        });
      }
      // 添加用户
      else {
        this.$http.post(`/users`, this.user).then((res) => {
          if (res.code == 0) {
            this.getData();
            this.$message({
              type: "success",
              message: "添加成功!",
            });
          } else {
            this.$message({
              type: "info",
              message: "添加失败",
            });
          }
        });
      }
      this.centerDialogVisible = false;
      this.isEdit = false;
    },
    // 对话框 取消
    cacel() {
      this.centerDialogVisible = false;
    },
    // 查找用户
    searchUser() {
      // console.log(this.search)
    },
    // 图片上传处理函数
    handleSuccessUpload(res, file, fileList) {
      this.imageUrl = res.result.path;
      this.user.avatar = res.result.path;
    },
    // 约束上传图片的数量
    handleImageExeed(files, fileList) {
      if (files.length === 1) {
        this.$message.error("只能上传一张图片");
      }
    },
    // 约束上传图片类型与大小
    beforeImageUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (
        [
          "image/jpeg",
          "image/svg",
          "image/gif",
          "image/jpg",
          "image/png",
        ].indexOf(file.type) === -1
      ) {
        this.$message.error(
          "上传头像图片只能是 JPG , PNG , JPEG, svg, gif 格式!"
        );
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
        return false;
      }
    },
  },
};
</script>

<style>
.user {
}
.user .el-card {
  margin-bottom: 25px;
}
.user .el-card h1 {
  text-align: center;
  color: #888;
  font-size: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.batch-del {
  margin-top: 10px;
}
.el-dialog .el-input {
  margin-top: 10px;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
